<template>
  <div class="task-detail-container">
    <div class="back-btn" @click="goBack">
      <i class="fa fa-arrow-left"></i> 返回
    </div>
    <h1>{{ task.title }}</h1>
    
    <div class="task-info">
      <div class="info-item">
        <span class="label">描述：</span>
        <span>{{ task.desc }}</span>
      </div>
      
      <div class="info-item">
        <span class="label">优先级：</span>
        <span class="priority-badge" :class="task.priority">{{ task.priority }}</span>
      </div>
      
      <div class="info-item">
        <span class="label">状态：</span>
        <span class="status-badge" :class="{ 'done': task.isDone, 'undone': !task.isDone }">
          {{ task.isDone ? '已完成' : '未完成' }}
        </span>
      </div>
      
      <div class="info-item">
        <span class="label">截止日期：</span>
        <span>{{ task.deadline }}</span>
      </div>
      
      <div class="info-item">
        <span class="label">创建时间：</span>
        <span>{{ formatDate(task.createTime) }}</span>
      </div>
    </div>
    
    <div class="actions">
      <button @click="toggleTaskStatus" class="action-btn">
        {{ task.isDone ? '标记为未完成' : '标记为完成' }}
      </button>
      <button @click="deleteTask" class="action-btn delete-btn">
        移至回收站
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { useTaskStore } from '@/store/taskStore';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const taskStore = useTaskStore();

// 获取路由参数中的任务ID
const taskId = computed(() => Number(route.params.id));

// 当前任务详情
const task = computed(() => {
  return taskStore.tasks.find(t => t.id === taskId.value) || {
    id: 0,
    title: '任务不存在',
    desc: '',
    priority: 'low',
    isDone: false,
    deadline: '',
    createTime: new Date().toISOString()
  };
});

// 返回列表页
const goBack = () => {
  router.back();
};

// 切换任务状态
const toggleTaskStatus = () => {
  if (task.value.id) {
    taskStore.toggleDone(task.value.id);
  }
};

// 删除任务（移至回收站）
const deleteTask = () => {
  if (task.value.id && confirm('确定要将此任务移至回收站吗？')) {
    taskStore.moveToRecycleBin(task.value.id);
    router.push('/');
  }
};

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  });
};
</script>

<style scoped>
.task-detail-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.back-btn {
  cursor: pointer;
  color: #6c757d;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
}

h1 {
  color: #333;
  margin-bottom: 24px;
}

.task-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.label {
  width: 100px;
  font-weight: bold;
  color: #6c757d;
}

.priority-badge {
  padding: 4px 8px;
  border-radius: 4px;
  color: white;
  font-size: 14px;
}

.low { background-color: #6c757d; }
.medium { background-color: #ffc107; }
.high { background-color: #dc3545; }

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.done {
  background-color: #28a745;
  color: white;
}

.undone {
  background-color: #6c757d;
  color: white;
}

.actions {
  display: flex;
  gap: 16px;
}

.action-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

.action-btn:hover {
  opacity: 0.8;
}

.delete-btn {
  background-color: #dc3545;
  color: white;
}
</style>